<template>
  <div class="production-plan">
    <el-button type="primary" @click="saveAll">保存主表单和明细</el-button>
    <h3 class="title">货物信息</h3>
    <!-- 基本信息 -->
    <el-form ref="formRef" :model="formData" :rules="rules" label-position="right" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="产品名称">
            <el-input v-model="formData.productName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品编号">
            <el-input v-model="formData.productId" placeholder="请输入" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="所属类别" prop="category">
            <el-select v-model="formData.category" placeholder="请选择">
              <el-option label="汽车行业" value="汽车行业" />
              <el-option label="医疗行业" value="医疗行业" />
              <el-option label="工程行业" value="工程行业" />
              <el-option label="电子行业" value="电子行业" />
              <el-option label="食品行业" value="食品行业" />
              <el-option label="纺织行业" value="纺织行业" />
              <el-option label="家具行业" value="家具行业" />
              <el-option label="化工行业" value="化工行业" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单位">
            <el-select v-model="formData.unit" placeholder="请选择">
              <el-option label="个" value="个" />
              <el-option label="双" value="双" />
              <el-option label="套" value="套" />
              <el-option label="件" value="件" />
              <el-option label="箱" value="箱" />
              <el-option label="盒" value="盒" />
              <el-option label="克" value="克" />
              <el-option label="千克" value="千克" />
              <el-option label="吨" value="吨" />
              <el-option label="米" value="米" />
              <el-option label="瓶" value="瓶" />
              <el-option label="桶" value="桶" />
              <el-option label="张" value="张" />
              <el-option label="辆" value="辆" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="规格型号">
            <el-input v-model="formData.specificationModel" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="单价">
            <el-input-number v-model="formData.unitPrice" placeholder="请输入" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品说明">
            <el-input v-model="formData.productDescription" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否为实体" prop="isEntity">
            <el-radio-group v-model="formData.isEntity">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否含税" prop="isTaxIncluded">
            <el-radio-group v-model="formData.isTaxIncluded">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品属性" prop="isSelfMade">
            <el-select v-model="formData.isSelfMade" placeholder="请选择">
              <el-option label="自制" value="1"></el-option>
              <el-option label="委外" value="2"></el-option>
              <el-option label="外购" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
                <el-form-item label="主供应商" >
                    <el-input 
                    placeholder="请输入" 
                    v-model="formData.mainSupplier" 
                    required
                  >
                    <template #suffix>
                      <el-button size="mini" @click="openAssociatedItemDialog1">
                        <i class="el-icon-search"></i>
                      </el-button>
                    </template>
                  </el-input>
                </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="安全库存">
            <el-input-number v-model="formData.safetyStock" placeholder="请输入" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="库存下限">
            <el-input-number v-model="formData.inventoryLowerLimit" placeholder="请输入" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="库存上限">
            <el-input-number v-model="formData.inventoryUpperLimit" placeholder="请输入" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="耗损率(%)">
            <el-input-number v-model="formData.lossRate" placeholder="请输入" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="产品有效期（天）">
            <el-input-number v-model="formData.productValidityDays" placeholder="请输入" :min="0" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="养护周期">
            <el-input v-model="formData.maintenanceCycle" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="条形码信息">
            <el-input v-model="formData.barcodeImage" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div id="app">
      <el-card>
        <template #header>
          <div class="flex justify-between items-center">
            <span>MinIO 文件上传</span>
          </div>
        </template>
        <el-form ref="formRef1" :model="formData1" label-width="100px">
          <el-form-item label="选择文件">
            <el-upload ref="uploadRef" action="https://localhost:7269/api/FileUpload/UploadFile" :headers="headers"
              :on-success="handleSuccess" :on-error="handleError" :show-file-list="false" :http-request="customRequest">
              <el-button type="primary">选择文件</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">上传文件</el-button>
          </el-form-item>
        </el-form>
        <el-alert v-if="message" :message="message" :type="messageType" :closable="false" style="margin-top: 20px" />
      </el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="key" label="文件名称" width="200" />
        <el-table-column prop="lastModified" label="创建时间" width="200">
          <template #default="scope">
            {{ new Date(scope.row.lastModified).toLocaleString() }}
          </template>
        </el-table-column>
        <el-table-column prop="size" label="文件大小" min-width="200" />
        <el-table-column fixed="right" label="操作" min-width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openDeleteDialog(scope.row.key)">
              删除文件
            </el-button>
            <el-button link type="primary" size="small" @click="download(scope.row.key)">下载文件</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="isDeleteDialogVisible" title="删除确认" @close="closeDeleteDialog">
        <p>确定要删除该文件吗？</p>
        <template #footer>
          <el-button @click="closeDeleteDialog">取消</el-button>
          <el-button type="primary" @click="confirmDelete">确定</el-button>
        </template>
      </el-dialog>
      <el-dialog v-model="isDownloadDialogVisible" title="文件下载">
        <template #content>
          <el-progress :percentage="downloadProgress" :status="downloadStatus"></el-progress>
        </template>
        <template #footer>
          <el-button @click="closeDownloadDialog">关闭</el-button>
        </template>
      </el-dialog>
    </div>
    <!-- 供应商选择对话框 -->
    <el-dialog
        v-model="associatedItemDialogVisible1"
        width="500px"
        title="供应商选择"
        append-to-body
      >
        <el-table
          :data="associatedItems1"
          highlight-current-row
          border
          size="small"
          @current-change="handleAssociatedItemChange1"
        >
         <el-table-column type="index" label="序号" />
          <el-table-column property="vendorName" label="供应商名称" />
          <el-table-column property="supplierNumber" label="供应商编号" />
          <el-table-column property="industry" label="供应商类别" />
          <el-table-column property="contact" label="联系人" />
          <el-table-column property="sex" label="性别" />
          <el-table-column property="origin" label="籍贯" />
          <el-table-column property="phone" label="手机号码" />
          <el-table-column property="email" label="邮箱" />
          <el-table-column property="addr" label="地址" />
          <el-table-column property="companyProfile" label="公司简介" />
          <el-table-column property="bank" label="开户银行" />
          <el-table-column property="accountName" label="账户名称" />
          <el-table-column property="bankCardNumber" label="银行卡号" />
        </el-table>
        <template #footer>
          <el-button @click="pickAssociatedItem1">确定</el-button>
        </template>
      </el-dialog>
  
    
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Materialread, Materialwrite } from '@/axios/axiosHelper';
import axios from 'axios';
import { th } from 'element-plus/es/locales.mjs';
import { nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

// 主表单数据
const formData = reactive({
  "goodsModelId": 0,
  "productName": "",
  "productId": "",
  "category": "",
  "unit": "",
  "specificationModel": "",
  "unitPrice": 0,
  "productDescription": "",
  "isEntity": true,
  "isTaxIncluded": true,
  "isSelfMade": '',
  "mainSupplier": "",
  "safetyStock": 0,
  "inventoryLowerLimit": 0,
  "inventoryUpperLimit": 0,
  "lossRate": 0,
  "productValidityDays": 0,
  "maintenanceCycle": "",
  "barcodeImage": "",
  "isDel": true
});

// 主表单验证规则
const rules = reactive({
  productName: [
    { required: true, message: '不能为空', trigger: 'input' }
  ],
  category: [
    { required: true, message: '请选择所属类别', trigger: 'change' }
  ],
  unit: [
    { required: true, message: '不能为空', trigger: 'input' }
  ],
  unitPrice: [
    { required: true, message: '不能为空', trigger: 'input' },
    { type: 'number', message: '请输入数字', trigger: 'input' }
  ],
  productDescription: [
    { required: true, message: '不能为空', trigger: 'input' }
  ],
  isEntity: [
    { required: true, message: '请选择是否为实体', trigger: 'change' }
  ],
  isTaxIncluded: [
    { required: true, message: '请选择是否含税', trigger: 'change' }
  ],
  needStorage: [
    { required: true, message: '请选择产品属性', trigger: 'change' }
  ],
  mainSupplier: [
    { required: true, message: '不能为空', trigger: 'input' }
  ],
  safetyStock: [
    { required: true, message: '不能为空', trigger: 'input' },
    { type: 'number', message: '请输入数字', trigger: 'input' }
  ],
  inventoryLowerLimit: [
    { required: true, message: '不能为空', trigger: 'input' },
    { type: 'number', message: '请输入数字', trigger: 'input' }
  ],
  inventoryUpperLimit: [
    { required: true, message: '不能为空', trigger: 'input' },
    { type: 'number', message: '请输入数字', trigger: 'input' }
  ],
  lossRate: [
    { required: true, message: '不能为空', trigger: 'input' },
    { type: 'number', message: '请输入数字', trigger: 'input' }
  ],
  productValidityDays: [
    { required: true, message: '不能为空', trigger: 'input' },
    { type: 'number', message: '请输入数字', trigger: 'input' }
  ],
  maintenanceCycle: [
    { required: true, message: '不能为空', trigger: 'input' }
  ],
  barcodeImage: [
    { required: true, message: '不能为空', trigger: 'input' }
  ]
});


const saveAll = async () => {
  try {
    const response = await axios.post('https://localhost:7279/api/Goods/AddGoods', formData);
    if (response.data) { // 增加对response.data的判断
      if (response.data.code === 100) { 
        ElMessage.success('主表单保存成功');
        router.push('/ShowGoods');
      } else {
        ElMessage.error(`主表单保存失败：${response.data.message}`);
      }
    } else {
      ElMessage.error('后端返回数据异常');
    }
  } catch (error) {
    console.error('保存错误:', error);
    ElMessage.error('保存失败，请检查网络或联系管理员');
  }
};


// ————————————————————————————————————供应商查询————————————————————————————————————
  
  
  // 对话框显示状态
  const associatedItemDialogVisible1 = ref(false);
  const currentAssociatedItem1 = ref({});
  // 库管人员数据
  const associatedItems1 = ref([]);
  // 打开库管人员选择对话框
  const openAssociatedItemDialog1 = () => {
    associatedItemDialogVisible1.value = true;
  };
  // 当前选中的库管人员行
  const handleAssociatedItemChange1 = (val) => {
    currentAssociatedItem1.value = val;
  };
  
  // 获取库管人员数据
  const fetchAssociatedProjects1 = () => {
    axios.get('https://localhost:7095/api/Vendor/QueryVendor')
      .then(res => {
        associatedItems1.value = res.data.data;
      })
      .catch(error => {
        // console.error('获取关联项目数据失败:', error);
        // ElMessage.error('获取关联项目数据失败，请检查网络或联系管理员');
      });
  };
  
  
  
  // 选择库管人员
  const pickAssociatedItem1 = () => {
    if (currentAssociatedItem1.value) {
      formData.mainSupplier = currentAssociatedItem1.value.vendorName;
      associatedItemDialogVisible1.value = false;
    }
  };
  
  onMounted(() => {
    //获取供应商名称
  fetchAssociatedProjects1();
    //图片上传显示
      listObjects();
  });









import { ElDialog } from 'element-plus';


const formRef1 = ref(null);
const uploadRef = ref(null);
const formData1 = ref({});
const message = ref('');
const messageType = ref('');
const tableData = ref([{
  key: "",
  lastModified: "",
  eTag: "",
  size: 0,
  isDir: false,
  versionId: null,
  contentType: null,
  expires: null,
  userMetadata: null,
  isLatest: false,
  lastModifiedDateTime: "",
}]);
const isDeleteDialogVisible = ref(false);
const currentDeleteKey = ref('');
const isDownloadDialogVisible = ref(false);
const downloadProgress = ref(0);
const downloadStatus = ref('');


const download = async (key) => {
  isDownloadDialogVisible.value = true;
  downloadProgress.value = 0;
  downloadStatus.value = 'active';
  try {
    const response = await axios.get(`/api/FileUpload/DownloadFile?objectName=${key}`, {
      responseType: 'blob',
      onDownloadProgress: (progressEvent) => {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        downloadProgress.value = percentCompleted;
      }
    });
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', key);
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    downloadStatus.value = 'success';
  } catch (error) {
    console.error('文件下载失败:', error);
    message.value = '文件下载失败: ' + (error.response?.data?.error || error.message);
    messageType.value = 'error';
    downloadStatus.value = 'exception';
  }
};

const listObjects = async () => {
  axios.get("https://localhost:7212/api/FileUpload/ListObjectsInOneBucket")
    .then((res) => {
      tableData.value = res.data;
      console.log("查询成功", res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

const headers = {
  'Content-Type': 'multipart/form-data'
};

const customRequest = async (options) => {
  const formData1 = new FormData();
  formData1.append('file', options.file);
  const response = await axios.post(options.action, formData1, {
    headers: headers
  });
  options.onSuccess(response.data);
  if (response.data != null) {
    alert("添加成功");
    return;
  } else {
    alert("添加失败");
    return;
  }
};

const handleError = (error) => {
  message.value = '上传失败: ' + (error.response?.data?.error || error.message);
  messageType.value = 'error';
};

const submitForm = () => {
  uploadRef.value.submit();
};

const openDeleteDialog = (key) => {
  currentDeleteKey.value = key;
  isDeleteDialogVisible.value = true;
};

const closeDeleteDialog = () => {
  isDeleteDialogVisible.value = false;
  currentDeleteKey.value = '';
};

const confirmDelete = () => {
  axios.delete("https://localhost:7212/api/FileUpload/DeleteObjectInOneBucket", {
    params: {
      objectName: currentDeleteKey.value
    }
  })
    .then((res) => {
      console.log("删除成功", res.data);
      message.value = '文件删除成功';
      messageType.value = 'success';
      listObjects();
      closeDeleteDialog();
    })
    .catch((err) => {
      console.log(err);
      message.value = '文件删除失败: ' + (err.response?.data?.error || err.message);
      messageType.value = 'error';
      closeDeleteDialog();
    });
};

const closeDownloadDialog = () => {
  isDownloadDialogVisible.value = false;
  downloadProgress.value = 0;
  downloadStatus.value = '';
};
</script>

<style scoped>
.production-plan {
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 20px;
}

.sub-title {
  margin: 20px 0 10px;
  font-size: 16px;
  font-weight: 500;
}

.detail-section,
.attachment-section {
  margin-top: 20px;
}

.el-table {
  margin-top: 10px;
}
</style>    

